<template>
  <div class="energy-card">
    <div class="card-item">
      <StatusCard
        :best-machine="bestMachine"
        :current-data="currentData"
        :computed-data="computedData"
      />
    </div>
    <div class="card-item">
      <vechart :options="firstOptions" />
    </div>
    <div class="card-item">
      <span class="temp-text">冷却水温度：{{ wit }}℃</span>
      <vechart :options="secondOptions" @seriesClick="popup" />
    </div>
    <div class="card-item">
      <span class="load-text">负荷率：{{ load }}%</span>
      <vechart :options="thirdOptions" @seriesClick="popup" />
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      yy: this.getFullYear(),
      MM: this.getMonth() + 1,
      dd: this.getDate(),
      hh: this.getHours(),
      mm: this.getMinutes(),
      ss: this.getSeconds(),
    };
    if (/(y+)/i.test(time)) {
      time = time.replace(
        RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    Object.keys(date).forEach(function (i) {
      if (new RegExp("(" + i + ")").test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? (date[i] = "0" + date[i]) : date[i];
        }
        time = time.replace(RegExp.$1, date[i]);
      }
    });
    return time;
  },
});
import { mapState } from "vuex";
import scatterOptions from "../json/scatterOptions.json";
import linecharts from "../json/linecharts.json";
import lineOptions from "../json/lineOptions.json";
export default {
  components: {
    StatusCard: () => import("./StatusCard.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },
  props: {
    currentData: {
      type: Object,
      default: () => {},
    },
    last7Data: {
      type: Object,
      default: () => {},
    },
    computedData: {
      type: Object,
      default: () => {},
    },
    bestData: {
      type: Array,
      default: () => [],
    },
    rightData: {
      type: Object,
      default: () => {},
    },
    bestMachine: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      scatterOptions: scatterOptions,
      linecharts: linecharts,
      lineOptions: lineOptions,
    };
  },
  computed: {
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    firstOptions() {
      if (
        this.last7Data &&
        this.last7Data.format_time &&
        this.last7Data.value
      ) {
        const arr = [];
        this.last7Data.format_time.forEach((item, index) => {
          const i = [
            this.last7Data.format_time[index],
            this.last7Data.value[index],
          ];
          arr.push(i);
        });
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("MM月dd日");
        };
        return {
          ...this.scatterOptions,
          xAxis: {
            ...this.scatterOptions.xAxis,
            axisLabel: {
              ...this.scatterOptions.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          series: [{ ...this.scatterOptions.series[0], data: arr }],
        };
      } else {
        return this.scatterOptions;
      }
    },
    secondOptions() {
      if (this.currentData && this.currentData.value) {
        const x = this.currentData.value.find((e) => e.tag_id === "lr");
        const y = this.currentData.value.find((e) => e.tag_id === "cop");
        if (
          this.bestData &&
          this.bestData[0] &&
          this.bestData[1] &&
          x &&
          (x.value || x.value === 0) &&
          y &&
          (y.value || y.value === 0)
        ) {
          const best1 = this.bestData.find((e) => e.name === "标准工况");
          const best2 = this.bestData.find((e) => e.name === "历史最佳");
          const arr1 = [];
          const arr2 = [];
          best1.load_rate.forEach((item, index) => {
            const i = [best1.load_rate[index], best1.value[index].toFixed(2)];
            arr1.push(i);
          });
          best2.load_rate.forEach((item, index) => {
            const i = [best2.load_rate[index], best2.value[index].toFixed(2)];
            arr2.push(i);
          });
          const dot = [[Math.min(x.value, 100), y.value.toFixed(2)]];
          // console.log(arr1, arr2, dot);
          // [
          //   "#2d9c32",
          //   "#b948a1"
          // ]
          return {
            ...this.linecharts,
            series: [
              { ...this.linecharts.series[0], data: arr1 },
              { ...this.linecharts.series[1], data: arr2 },
              { ...this.linecharts.series[2], data: dot },
            ],
          };
        } else {
          return this.linecharts;
        }
      } else {
        return this.linecharts;
      }
    },
    thirdOptions() {
      if (this.currentData && this.currentData.value) {
        const x = this.currentData.value.find((e) => e.tag_id === "wit");
        const y = this.currentData.value.find((e) => e.tag_id === "cop");
        if (
          x &&
          (x.value || x.value === 0) &&
          y &&
          (y.value || y.value === 0) &&
          this.rightData &&
          this.rightData.temperature &&
          this.rightData.value
        ) {
          const dot = [[x.value, y.value.toFixed(2)]];
          const arr = [];
          this.rightData.temperature.forEach((item, index) => {
            const i = [
              this.rightData.temperature[index],
              this.rightData.value[index].toFixed(2),
            ];
            arr.push(i);
          });
          const min = function (value) {
            return Math.floor(value.min);
          };
          console.log(arr, dot);
          return {
            ...this.lineOptions,
            yAxis: { ...this.lineOptions.yAxis, min: min },
            series: [
              { ...this.lineOptions.series[0], data: arr },
              { ...this.lineOptions.series[1], data: dot },
            ],
          };
        } else {
          return this.lineOptions;
        }
      } else {
        return this.lineOptions;
      }
    },

    wit() {
      if (this.currentData && this.currentData.value) {
        const x = this.currentData.value.find((e) => e.tag_id === "wit");
        if (x && (x.value || x.value === 0)) {
          return x.value.toFixed(1);
        } else {
          return "-";
        }
      } else {
        return "-";
      }
    },
    load() {
      if (this.currentData && this.currentData.value) {
        const x = this.currentData.value.find((e) => e.tag_id === "lr");
        if (x && (x.value || x.value === 0)) {
          return x.value.toFixed(2);
        } else {
          return "-";
        }
      } else {
        return "-";
      }
    },
  },
  methods: {
    async popup(data) {
      const result = await this.service.getChillerCopInfo({
        id: this.currentData.id || this.computedData.id,
        load: parseFloat(this.load),
        temperature: parseFloat(this.wit),
      });
      if (!result || !result.data) {
        this.$notify({
          title: "cop数据列表获取失败",
          type: "error",
          duration: 2500,
        });
        return;
      }
      const payload = {
        data: result.data,
        dataTag:
          "负荷率：" +
          Math.min(parseFloat(this.load), 100) +
          "%, " +
          "冷却水温度：" +
          parseFloat(this.wit) +
          "℃",
      };
      this.$emit("popup", payload);
    },
  },
};
</script>

<style>
.energy-card {
  width: 100%;
  min-height: 18rem;
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-bottom: 1rem;
  max-height: 20rem;
}
.card-item {
  flex: 1;
  position: relative;
}
.card-item > span {
  position: absolute;
  color: #ddd;
}
.card-item .load-text {
  font-size: 1.3rem;
  top: 0;
  left: 53%;
}
.card-item .temp-text {
  font-size: 1rem;
  top: 2%;
  right: 2%;
}
</style>
